import { useContext, useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom';
import { Layout, Space, Dropdown, message, notification, Button } from 'antd'

import { $ } from '@components/util'
import { NavigateMode } from '../constant/main-frame-constants'
import { downloadLocalFile } from "@commonMethod"

import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UserOutlined,
  LogoutOutlined
} from '@ant-design/icons';

import styles from '../styles/main-frame.module.css'

import context from '@contexts/frame-context'
import { session } from '@core'

import operatingInstructions from '@assets/operatingInstructions.pptx'

const appLogo = 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg'

const header_class = $(styles, 'ant-pro-fixed-header', 'ant-pro-fixed-header-action', 'ant-pro-header-light')
const collapsed_header_class = $(styles, 'ant-pro-fixed-header', 'ant-pro-header-light')
const header_content_class_siderMenu = $(styles, 'ant-pro-global-header', 'ant-pro-global-header-layout-side')
const header_logo_class = $(styles, 'ant-pro-global-header-logo')
const header_left_box_class = $(styles, 'irs-header-left-box')
const header_left_box_toggle_icon_class = $(styles, 'irs-header-collapsed-icon')
const header_left_box_title_class = $(styles, 'irs-header-left-title')
const header_left_box_download_class = $(styles, 'irs-header-left-download')
const header_right_box_class = $(styles, 'right', 'dark')
const header_right_box_item_class = $(styles, 'action2')
const header_right_box_item_icon_class = $(styles, 'action')

const ENV_NAME = process.env.REACT_APP_NAME

const getHeaderClassName = (navigateMode, collapsed) => {
  if (navigateMode === NavigateMode.sideMenu) {
    return collapsed ? collapsed_header_class : header_class
  }
  return null
}

const getHeaderStyle = (navigateMode, headerHeight, currentSiderWidth) => {
  let style = {
    padding: 0,
    height: headerHeight,
    lineHeight: `${headerHeight}px`,
    transition: 'all 0.2s',
    width: '100%',
  }

  // if (navigateMode == NavigateMode.sideMenu) {
  //   style.width = `calc(100% - ${currentSiderWidth}px)`
  //   style.zIndex = 19
  //   style.right = 0
  // } else {
  //   style.width = '100%'
  //   style.zIndex = 100
  // }

  return style
}

const getHeaderContentClass = (navigateMode) => {

  if (navigateMode === NavigateMode.sideMenu) {
    return header_content_class_siderMenu
  }

  return null
}

const getLogoView = (navigateMode) => {

  if (navigateMode === NavigateMode.sideMenu) {
    return null
  }

  return (
    <div id='logo' className={header_logo_class}>
      <a>
        <img src={appLogo} alt='logo' />
        <h1>Fnd Compon</h1>
      </a>
    </div>
  )
}

const downloadOperatingInstructions = async (setDownloadLoading) => {
  setDownloadLoading(true)
  notification.info({
    message: '温馨提示',
    description: '文件正在下载中，请稍后...'
  })
	downloadLocalFile(operatingInstructions, '众诚保险-风险地图系统-功能操作指引.pptx').then(res => {
		// 下载成功后的操作
		message.success('下载成功')
    setDownloadLoading(false)
	})
}

const getLeftBox = (collapsed, setCollapsed, downloadLoading, setDownloadLoading) => {
  const ToggleIcon = collapsed ? MenuUnfoldOutlined : MenuFoldOutlined
  return (
    <div className={header_left_box_class}>
      <ToggleIcon 
        className={header_left_box_toggle_icon_class}
        onClick={() => setCollapsed((value) => !value)}
        />
      <span className={header_left_box_title_class}>风险地图系统({ENV_NAME})</span>
      {/* <span className={header_left_box_download_class} onClick={() => downloadOperatingInstructions(setDownloadLoading)}>下载操作指引</span> */}
      <Button className={header_left_box_download_class} disabled={downloadLoading} onClick={() => downloadOperatingInstructions(setDownloadLoading)}>{downloadLoading ? '文件正在下载中...' : '下载操作指引'}</Button>
    </div>
  )
}

const FCInternalHeader = () => {
  const {
    navigateMode,
    collapsed,
    setCollapsed,
    headerHeight,
    currentSiderWidth,
  } = useContext(context)

  const headerClass = getHeaderClassName(navigateMode, collapsed)
  const headerStyle = getHeaderStyle(navigateMode, headerHeight, currentSiderWidth)
  const headerContentClass = getHeaderContentClass(navigateMode)
  const headerLogoView = getLogoView(navigateMode)
  const [downloadLoading, setDownloadLoading] = useState(false)
  const headerLeftBox = getLeftBox(collapsed, setCollapsed, downloadLoading, setDownloadLoading)

  const navigate = useNavigate()

  const items = [
    {
      key: 'logout',
      icon: <LogoutOutlined />,
      label: '退出登录'
    }
  ];

  async function handleLogout() {
    // const { error } = await loginOut()
    // if (error) return

    session.clear()
    navigate('/login',{replace: true})
  }

  const DropdownOnClick = ({ key }) =>{
    if (key === 'logout') {
      handleLogout()
    }
  }

  return (
      <Layout.Header className={headerClass} style={headerStyle}>
        <div className={headerContentClass}>
          { headerLogoView }
          { headerLeftBox }
          <div style={{flex: 1}} />
          <Space className={header_right_box_class}>
            {/* <span className={header_right_box_item_class}>
              <QuestionCircleOutlined className={header_right_box_item_icon_class} />
            </span>
            <span className={header_right_box_item_class}>
              <BellOutlined className={header_right_box_item_icon_class} />
            </span> */}
            <span className={header_right_box_item_class}>
              欢迎登录，{session.get('userName')}
            </span>
            <span className={header_right_box_item_class}>
              {/* <Dropdown menu={userMenu} placement="bottomLeft">
                <UserOutlined className={header_right_box_item_icon_class}/>
              </Dropdown> */}
              <Dropdown menu={{items, onClick: DropdownOnClick}} placement="bottomLeft">
                <UserOutlined className={header_right_box_item_icon_class}/>
              </Dropdown>
            </span>
          </Space>
        </div>
      </Layout.Header>
  )
}

export default FCInternalHeader
